@{
    ViewData["Title"] = "首页";
}

<style>
    .hero-section {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 80px 0;
        margin: -30px -30px 30px -30px;
        text-align: center;
    }
    
    .hero-title {
        font-size: 3.5rem;
        font-weight: 700;
        margin-bottom: 20px;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }
    
    .hero-subtitle {
        font-size: 1.3rem;
        margin-bottom: 40px;
        opacity: 0.9;
    }
    
    .feature-card {
        background: white;
        border-radius: 15px;
        padding: 40px 30px;
        text-align: center;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
        height: 100%;
        border: none;
    }
    
    .feature-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    }
    
    .feature-icon {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 25px;
        font-size: 2rem;
        color: white;
    }
    
    .feature-title {
        font-size: 1.4rem;
        font-weight: 600;
        margin-bottom: 15px;
        color: #2f4050;
    }
    
    .feature-desc {
        color: #676a6c;
        line-height: 1.6;
    }
    
    .stats-section {
        background: #f8f9fa;
        padding: 60px 0;
        margin: 60px -30px 30px -30px;
    }
    
    .stat-item {
        text-align: center;
        padding: 30px 20px;
    }
    
    .stat-number {
        font-size: 3rem;
        font-weight: 700;
        color: var(--ace-primary);
        margin-bottom: 10px;
    }
    
    .stat-label {
        font-size: 1.1rem;
        color: #676a6c;
        font-weight: 500;
    }
    
    .quick-actions {
        background: white;
        border-radius: 15px;
        padding: 40px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    }
    
    .action-btn {
        display: block;
        width: 100%;
        padding: 20px;
        margin-bottom: 15px;
        background: linear-gradient(135deg, var(--ace-primary), #5a9bd4);
        color: white;
        text-decoration: none;
        border-radius: 10px;
        transition: all 0.3s ease;
        border: none;
    }
    
    .action-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(67, 142, 185, 0.3);
        color: white;
    }
    
    .system-info {
        background: white;
        border-radius: 15px;
        padding: 30px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    }
</style>

<!-- 英雄区域 -->
<div class="hero-section">
    <div class="container">
        <h1 class="hero-title">西点云产品管理平台</h1>
        <p class="hero-subtitle">企业级产品版本管理与自动化部署解决方案</p>
        <div class="d-flex justify-content-center gap-3">
            <a href="/Product" class="btn btn-light btn-lg px-4">
                <i class="bi bi-box-seam me-2"></i>产品管理
            </a>
            <a href="/Version" class="btn btn-outline-light btn-lg px-4">
                <i class="bi bi-tags me-2"></i>版本发布
            </a>
        </div>
    </div>
</div>

<!-- 功能特性 -->
<div class="row mb-5">
    <div class="col-lg-4 mb-4">
        <div class="feature-card">
            <div class="feature-icon" style="background: linear-gradient(135deg, #667eea, #764ba2);">
                <i class="bi bi-box-seam"></i>
            </div>
            <h3 class="feature-title">产品管理</h3>
            <p class="feature-desc">统一管理企业产品信息，支持IIS站点和Windows服务两种部署类型，实现产品全生命周期管理。</p>
        </div>
    </div>
    <div class="col-lg-4 mb-4">
        <div class="feature-card">
            <div class="feature-icon" style="background: linear-gradient(135deg, #87B87F, #a8d8a0);">
                <i class="bi bi-tags"></i>
            </div>
            <h3 class="feature-title">版本控制</h3>
            <p class="feature-desc">精确的版本发布管理，支持文件上传、操作手册管理，确保每个版本的可追溯性和完整性。</p>
        </div>
    </div>
    <div class="col-lg-4 mb-4">
        <div class="feature-card">
            <div class="feature-icon" style="background: linear-gradient(135deg, #6FB3E0, #89c4f4);">
                <i class="bi bi-cloud-check"></i>
            </div>
            <h3 class="feature-title">部署监控</h3>
            <p class="feature-desc">实时监控已部署应用状态，支持多服务器、多企业环境管理，提供完整的部署信息追踪。</p>
        </div>
    </div>
</div>

<!-- 统计数据 -->
<div class="stats-section">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-6">
                <div class="stat-item">
                    <div class="stat-number">@ViewBag.ProductCount</div>
                    <div class="stat-label">管理产品</div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="stat-item">
                    <div class="stat-number">@ViewBag.VersionCount</div>
                    <div class="stat-label">版本发布</div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="stat-item">
                    <div class="stat-number">@ViewBag.EnterpriseCount</div>
                    <div class="stat-label">服务企业</div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="stat-item">
                    <div class="stat-number">@ViewBag.DeployedCount</div>
                    <div class="stat-label">部署应用</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 快速操作和系统信息 -->
<div class="row">
    <div class="col-lg-8 mb-4">
        <div class="system-info">
            <h4 class="mb-4">
                <i class="bi bi-info-circle text-primary me-2"></i>系统介绍
            </h4>
            <div class="row">
                <div class="col-md-6">
                    <h6 class="text-primary mb-3">核心功能</h6>
                    <ul class="list-unstyled">
                        <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>多产品统一管理</li>
                        <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>版本发布控制</li>
                        <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>文件云端存储</li>
                        <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>部署状态监控</li>
                    </ul>
                </div>
                <div class="col-md-6">
                    <h6 class="text-primary mb-3">技术特性</h6>
                    <ul class="list-unstyled">
                        <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>AWS S3 文件存储</li>
                        <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>MySQL 数据库</li>
                        <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>ASP.NET Core 6</li>
                        <li class="mb-2"><i class="bi bi-check-circle text-success me-2"></i>响应式设计</li>
                    </ul>
                </div>
            </div>
            <div class="mt-4 p-3 bg-light rounded">
                <h6 class="text-warning mb-2">
                    <i class="bi bi-lightbulb me-2"></i>使用建议
                </h6>
                <p class="mb-0 small text-muted">
                    建议按照 <strong>部门管理 → 企业管理 → 产品管理 → 版本发布 → 部署监控</strong> 的顺序进行系统配置，
                    确保数据的完整性和系统的正常运行。
                </p>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4 mb-4">
        <div class="quick-actions">
            <h4 class="mb-4">
                <i class="bi bi-lightning text-warning me-2"></i>快速操作
            </h4>
            <a href="/Product/Create" class="action-btn">
                <i class="bi bi-plus-circle me-2"></i>新增产品
            </a>
            <a href="/Version/Create" class="action-btn">
                <i class="bi bi-upload me-2"></i>发布版本
            </a>
            <a href="/DeployedApplication/Create" class="action-btn">
                <i class="bi bi-server me-2"></i>添加部署
            </a>
            <a href="/Enterprise/Create" class="action-btn">
                <i class="bi bi-building me-2"></i>新增企业
            </a>
        </div>
    </div>
</div>